<!--
 * @Description: 弹窗底版组件（需自定义slot内容）
 * @Author: xinqiao lxq1990.0716@qq.com
 * @Date: 2023-10-12
 * @LastEditors: xinqiao lxq1990.0716@qq.com
 * @LastEditTime: 2023-10-18
-->
<script lang="ts" setup>
  import { ref, watch } from 'vue'

  const props = defineProps<{ show: boolean }>()
  const emit = defineEmits<{
    (event: 'update:show', show: boolean): void
    (event: 'sendSlid'): void
  }>()

  /**
   * 隐藏popup
   */
  const hidePopup = () => {
    translateDirection.value = 'down'
    emit('sendSlid')
    setTimeout(() => {
      emit('update:show', false)
    }, 300)
  }

  /** 弹窗移动方向：up-向上, down-向下 */
  const translateDirection = ref('')

  /** 监听弹窗显示，弹窗向上移动 */
  watch(
    () => props.show,
    (newVal, oldVal) => {
      if (newVal && !oldVal) translateDirection.value = 'up'
    },
  )
</script>

<template>
  <view class="popup" v-if="props.show" @click="hidePopup">
    <view class="popup-shade" :class="translateDirection" />
    <view class="popup-content" :class="translateDirection" @click.stop>
      <slot></slot>
    </view>
  </view>
</template>

<style lang="less" scoped>
  .popup {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    height: 100%;

    > .popup-shade {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 0;
      width: 100%;
      height: 100%;

      &.up {
        animation: shadeUp 300ms linear forwards;
      }

      &.down {
        animation: shadeDown 300ms linear forwards;
      }
    }

    > .popup-content {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      background-color: #fff;
      border-radius: 40rpx 40rpx 0 0;
      transform: translate(0, 100%);

      &.up {
        animation: translateUp 300ms linear forwards;
      }

      &.down {
        animation: translateDown 300ms linear forwards;
      }
    }
  }

  @keyframes shadeUp {
    from {
      background-color: rgb(0 0 0 / 0%);
    }

    to {
      background-color: rgb(0 0 0 / 60%);
    }
  }

  @keyframes shadeDown {
    from {
      background-color: rgb(0 0 0 / 60%);
    }

    to {
      background-color: rgb(0 0 0 / 0%);
    }
  }

  @keyframes translateUp {
    from {
      transform: translate(0, 100%);
    }

    to {
      transform: translate(0, 0);
    }
  }

  @keyframes translateDown {
    from {
      transform: translate(0, 0);
    }

    to {
      transform: translate(0, 100%);
    }
  }
</style>
